<template>
  <div class="userContainer">
    <div class="bigBox">
      <!-- tab头部展示 -->
      <!-- v-model="activeName"  @tab-click="handleClick" -->
      <el-tabs class="tabs">
        <el-tab-pane label="用户列表" name="first"></el-tab-pane>
        <!-- <el-tab-pane label="用户等级" name="second"></el-tab-pane>
        <el-tab-pane label="标签设置" name="third"></el-tab-pane> -->
      </el-tabs>
      <!-- 操作部分 -->
      <div class="doneContainer">
        <!-- v-model="input2" -->
        <el-input
          size="medium"
          class="input"
          placeholder="请输入关键字"
          prefix-icon="el-icon-search"
          v-model="tempSearchObj.userName"
        >
        </el-input>

        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="default" @click="resetSearch">清空</el-button>
        <el-button
          @click="addUserInfo"
          type="primary"
          title="添加用户"
          size="medium"
          >添加</el-button
        >
        
      </div>

      <!-- 表格部分 -->
      <!-- ref="multipleTable"
      :data="tableData"
      @selection-change="handleSelectionChange" -->
      <el-table
        border
        class="firstRow"
        ref="multipleTable"
        :data="userInfo"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="userName"
          label="用户名称"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" label="用户头像" width="120">
          <template slot-scope="{ row, $index }">
            <img :src="row.userImgs" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="userId" label="用户id" width="80">
        </el-table-column>
        <!-- <el-table-column align="center" label="电话" porp="accountNumber" width="width"></el-table-column> -->
        <el-table-column
          align="center"
          prop="password"
          label="密码"
          width="width"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="accountNumber"
          label="电话"
          width="width"
        >
          <!-- <template slot-scope="scope">{{ scope.row.oldDate }}</template> -->
        </el-table-column>

        <el-table-column
          align="center"
          prop="userAddress"
          label="地址"
          width="width"
        >
        </el-table-column>

         <el-table-column
          align="center"
          label="操作"
         
        >
        <template slot-scope="{row,$index}">
          <el-button type="success" title="编辑用户信息" size="medium" @click="editUserInfo(row,$index)"
          >编辑</el-button
        >
        <el-button type="danger" title="删除用户" size="medium" @click="deleteUserInfo($index)"
          >删除</el-button
        >
        </template>
        
        </el-table-column>
      </el-table>

      <!-- 分页器部分 -->
      <!-- @size-change="handleSizeChange"
          @current-change="handleCurrentChange" -->
      <div class="block">
        <el-pagination
          style="textalign: center"
          :current-page="1"
          :page-sizes="[3, 5, 10]"
          :page-size="5"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="2"
        >
        </el-pagination>
      </div>
      <el-dialog
        class="dialog"
        title="用户信息"
        :visible.sync="dialogFormVisible"
      >
      <!-- :rules="rules" ref="cur" -->
        <el-form :model="form" >
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="form.userName"
              autocomplete="off"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户头像">
            <el-upload
              class="avatar-uploader"
              action="/dev-api/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.userImgs" :src="form.userImgs" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户地址" prop="userAddress">
            <el-input
              v-model="form.userAddress"
              style="width: 300px"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户手机" prop="accountNumber">
            <el-input
              v-model="form.accountNumber"
              style="width: 300px"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input
              v-model="form.password"
              autocomplete="off"
              style="width: 300px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUserinfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      searchObj:{
        userName:''
      },
      tempSearchObj:{
        userName:''//收集搜索条件输入的对象
      },
      dialogFormVisible: false, //控制弹出框显示与隐藏
      // userImgs: "",
      //收集用户添加的数据
      form: {
        userName: "",
        userAddress: "",
        accountNumber: "",
        password: "",
        flag : 0,
        // userImgs:''
      },
      // 表单验证规则
      // rules: {
      //   name: [
      //     { required: true, message: "请输入用户名称", trigger: "change" },
      //   ],
      //   address: [
      //     { required: true, message: "请输入用户地址", trigger: "change" },
      //   ],
      //   phoneNumber: [
      //     { required: true, message: "请输入用户手机号", trigger: "change" },
      //   ],
      //   password: [
      //     { required: true, message: "请输入用户密码", trigger: "change" },
      //   ],
      // },
      userInfo: [],
    };
  },
  mounted() {
    this.userInfo = this.$store.state.brand.userAll.userInfo.details;
   
    // .details
  },
  methods: {
    //根据输入进行搜索
    search(){
      // this.searchObj = {...this.tempSearchObj}
      items.filter(item => item.userName)

    },
    //重置输入后搜索
    resetSearch(){
      this.searchObj = {
        userName :''
      }
      this.tempSearchObj = {
        userName: ''
      }
    },

    // 添加用户头像的回调上传成功的回调
    handleAvatarSuccess(res, file) {
      this.form.userImgs = res.data;
    },
    // 用户上传之前的回调
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 添加用户信息回调
    addUserInfo() {
      // 对话框显示出来
      this.dialogFormVisible = true;
      // 把收集的数据清空
      // this.getUserinfo = { name: "", address: "" };
      this.form = { name: "", address: "", phoneNumber: "", password: "" };
    },
    //点击编辑的回调
    editUserInfo(row,index){
        // 对话框显示出来
      this.dialogFormVisible = true;

      this.form = row

      this.userInfo[index].flag = 1
    },
    //点击删除按钮的回调
    deleteUserInfo(index){
      this.userInfo.splice(index,1)
    },
    //对话框确定按钮的回调
    saveUserinfo() {
      //获取form  进行全部的item验证 如果验证成功 就添加  
      // this.$refs.cur.validata(success => {
      //   if(success){
          this.dialogFormVisible = false;
          // //接收form
          let form = this.form;
          
        
        // 判断是否有id 如果有id 说明是编辑事件 如果没有id 说明是添加
        if(!form.userId){
          this.userInfo.push(form)
        }

        // }
      // })
      
    },
  },
};
</script>



<style >
.userContainer {
  width: 100%;
  background-color: #fff;
}
.userContainer .bigBox {
  width: 98%;
}
.userContainer .bigBox .tabs {
  margin-left: 20px;
  margin-bottom: 10px;
}

.userContainer .bigBox .doneContainer {
  margin-left: 10px;
}
.userContainer .bigBox .firstRow {
  margin-left: 10px;
  margin-top: 10px;
}
.userContainer .bigBox .doneContainer .input {
  width: 200px;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>